<template>
  <div class="app">
    <el-container>

      <el-header>

        <div class="report_header" ref="headerHeight">

          <div  style="display: flex;flex-direction: row;flex-wrap: wrap;">
                <div class="report_header_left">
                </div>

                <div class="report_header_date">
                  <queryDate @queryDateClick='queryDateClick'  :endDate="endDate" :beginDate="beginDate"></queryDate>
                </div>


                <div class="report_header_query">
                  <queryMember @queryMemberClick="queryMemberClick"></queryMember>
                </div>

          </div>


          <div>

            <el-button style="margin-top: 5px;" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel style='margin-top: 5px;' ref="exportList2Excel" @handleExport="handleExport" name="导出" />

          </div>

        </div>

      </el-header>

      <el-main>

          <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length-1?'总计':scope.$index +1}}</template>
          </el-table-column>
          <el-table-column prop="createDate" label="时间" header-align="center" align="center" width="120">
          </el-table-column>
          <el-table-column prop="name" label="客户信息" header-align="center" width="180">
          </el-table-column>
          <el-table-column prop="memo" label="摘要" header-align="center" min-width="250">
          </el-table-column>
          <el-table-column prop="credit" width="130" header-align="center"  align="right" label="收入">
          </el-table-column>
          <el-table-column prop="debit" width="130" header-align="center"  align="right" label="支出">
          </el-table-column>

          <el-table-column align="center" header-align="center" width="100" label="单据类型">
            <template slot-scope="scope">
              <el-tag  v-if="scope.$index != tableData.length-1">{{scope.row.type==3?"提现":"收支"}}</el-tag>
            </template>
          </el-table-column>

        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import Pagination from '@/components/Pagination';
  import ExportList2Excel from "@/components/ExportList2Excel";
  import {
    list
  } from '@/api/point'
  import utils from '@/utils/utils'
  import permission from '@/directive/permission'
  //条件组件
  import queryDate from '@/components/Query/queryDate'
  import queryMember from '@/components/Query/queryMember'
  export default {
    name: 'report-point-detailed',
    data() {
      return {
        printing:5000,//打印数量设置
        query: {
          endDate: '',
          beginDate: '',
          memberId: ''
        },
        tableData: [],
        curHeight: null,
        pageSize: 20,
        total: 0,
        pageNum: 1,
        headerType: false,
        beginDate:"",
        endDate:"",
        membername:"",
      }
    },
    directives: {
      elDragDialog
    },
    watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
   $route (newVal, oldVal) {
        if (newVal.name=='report-point-detailed' && newVal.query.id!=this.id) {
          this.loadOrder()
        }
      }
    },
    created() {

      this.beginDate=this.$route.query.beginDate,
      this.endDate=this.$route.query.endDate,

      this.membername=this.$route.query.membername,

      this.loadOrder()
    },
    components: {
      Pagination,
      queryDate,
      queryMember,
      ExportList2Excel
    },
    mounted() {
      this.comeIn();
      this.beforeMount();
    },

    methods: {
      //下载模板的函数
      handleExport() {
        let _this = this
        var loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        //要导出函数携带的参数
        //要导出函数携带的参数
        let data = {}
        data.tHeader = ["时间", "客户信息", "摘要", "收入", "支出", "类型"]
        data.filterVal = ["createDate", "name", "memo", "credit", "debit", "type"]
        data.filename = "京豆明细列表";
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.printing)
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('memberId', this.query.memberId)
        list(params).then(res => {
          res.data.data.forEach((item) => {
            item.createDate = utils.dateFormatter(item.createDate)
            item.credit = item.credit/100
            item.debit = item.debit/100
            if (item.type==3) {
                item.type = '提现'
            } else {
                item.type = '收支'
            }
          })
          data.list = res.data.data
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();

          if (data.list.length == this.printing) {
            this.pageNum++
            this.handleExport()
          }
          else {
            return;
          }

        }).catch(error => {
          _this.$refs.exportList2Excel.unlockLoading()
          loading.close();
        })
      },
      queryDateClick(data) {
        this.query.beginDate = data.beginDate
        this.query.endDate = data.endDate
      },
      queryMemberClick(data) {
        this.query.memberId = data.memberId
      },

      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            var headerHeight = _this.$refs.headerHeight.clientHeight
            _this.curHeight = h - 174 - headerHeight //减去页面上固定高度height
          })();
        };
      },
      comeIn() {
        console.log('222')
        var _this = this
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        var headerHeight = _this.$refs.headerHeight.clientHeight
        this.curHeight = h - 174 - headerHeight //减去页面上固定高度height
      },
      loadOrder() {
        var _this = this
        const params = new URLSearchParams()
        params.append('pageNum', this.pageNum)
        params.append('pageSize', this.pageSize)
        params.append('startDate', this.query.beginDate)
        params.append('endDate', this.query.endDate)
        params.append('memberId', this.query.memberId)
        list(params).then(response => {
          response.data.data.forEach((item) => {
            item.createDate = utils.dateFormatter(item.createDate)
            item.credit = item.credit/100
            item.debit = item.debit/100
          })
          _this.tableData = response.data.data
          _this.total = response.data.total
        }).catch(error => {
        })
      },

      totalLine({
                  row,
                  column,
                  rowIndex,
                  columnIndex
                }) {
        var _this = this
        if (rowIndex === _this.tableData.length - 1) {
          if (columnIndex === 0) {
            return {
              rowspan: 1,
              colspan: 5
            };
          } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },
    }

  }
</script>

<style scoped>
  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }
  /deep/.el-header {
    padding: 10px;
    height: 100% !important;
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 10px;
    justify-content: space-between;
  }


  .report_header_left {
    width: 5px;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 130px;
    margin-top: 5px;
  }

  .report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
    margin-top: 5px;
  }

  .report_footer_box {
    width: 100%;
    border: 1px solid #dfe6ec;
    border-top: none;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: white;
  }

  /deep/.el-footer {
    padding: 10px;
    padding-top: 0;
  }

  .report_footer_box_title {
    margin-left: 10px;
    font-size: 12px;
    font-weight: bold;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }





  /deep/.el-table--group::after,
  .el-table--border::after,
  .el-table::before {
    background-color: white;
  }

  /deep/.el-table__body tbody .el-table__row:last-child {
    background-color: #F5F7FA;
  }

  /deep/.el-main {
    padding: 10px;
    padding-bottom: 0;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    border-bottom: none;
  }

  /deep/.el-table::before {
    height: 0px;
  }

  /deep/.el-table--border th {
    background-color: rgba(241, 242, 243, 1);
  }

  /deep/.pagination-container {
    margin-top: 0 !important;
  }
</style>
